import { NButton, NCheckbox } from 'naive-ui'
import { useProTableState } from '@/components/pro-table/context.ts'

/**
 * @ClassName: setting-header
 * @Description: // 配置-头部部分
 * @Author: Ellwood
 * @CreateDate: 2024/2/27 - 8:17
 * @Version: V1.0.0
 */
const settingHeader = defineComponent({
  name: 'SettingHeader',
  setup() {
    const state = useProTableState()
    return () => {
      const checkedboxProps = {
        'onUpdate:checked': state?.settingColumns?.handleCheckedAll,
      }
      return (
        <div class="flex justify-between w-240px py-6px px-24px">
          <div>
            <NCheckbox
              {...checkedboxProps}
              checked={state.settingColumns?.isAllChecked?.value}
              indeterminate={state.settingColumns?.indeterminate?.value}
            />
            <span class="ml-6px">列展示</span>
          </div>
          <NButton onClick={state?.settingColumns?.init} text type="primary">重置</NButton>
        </div>
      )
    }
  },
})

export default settingHeader
